<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <style>
    </style>
</head>
<body>
    <div id="app">
        <!-- 绑定事件函数不添加括号，在事件函数中直接使用第一个形参接受event事件对象 -->
       <button @click="fn1">点击我，弹出</button>
       <!-- 在绑定事件函数中，添加括号，事件函数不会直接调用，事件触发的时候才调用 -->
       <!-- 显性传递一个$event实参 -->
       <!-- 在v-on绑定事件的插值语法中，默认是存在一个$event的值，代表当前的event事件对象)，将来在事件函数中接收，接收的这个值就是event事件对象 -->
       <button @click="fn2($event)">点击我</button>
       <button @click="fn3($event,10)">点击我，多个</button>


    </div>
    <script>
         /* Vue.config 是一个对象，包含 Vue 的全局配置,设置为 false 以阻止 vue 在启动时生成生产提示。 */
         Vue.config.productionTip = false;
        const vm = new Vue({
            el:"#app",
            data(){
                return{
                  
                };
            },
            //methods配置项，主要用来书写回调函数
            methods:{
                fn1(event){
                    alert("i love you ")
                    console.log(event,"fn1")
                },
                fn2(event){
                    console.log(event,"fn2")
                }, 
                fn3(event,a){
                    console.log(event,"fn3")
                },
            }
        });
    </script>
</body>
</html>